<template>
  <div class="pre-image">
    <section class="viewer-box">
      <VueViewer ref="viewer" class="viewer" :options="options" @inited="inited">
        <img :src="src" class="image" />
      </VueViewer>
    </section>

    <el-row class="flx-justify-between">
      <el-space>
        <el-button type="primary" @click="handle('rotateLeft')">
          <template #icon
            ><el-icon><RefreshLeft /></el-icon
          ></template>
        </el-button>
        <el-button type="primary" @click="handle('rotateRight')">
          <template #icon
            ><el-icon><RefreshRight /></el-icon
          ></template>
        </el-button>
        <el-button type="primary" @click="handle('scaleMinus')">
          <template #icon
            ><el-icon><Minus /></el-icon
          ></template>
        </el-button>
        <section class="zoom-proportion">{{ zoomProportion }}</section>
        <el-button type="primary" @click="handle('scalePlus')">
          <template #icon
            ><el-icon><Plus /></el-icon
          ></template>
        </el-button>
      </el-space>

      <el-space>
        <!-- <el-button type="primary">
          <template #icon><el-icon><Edit /></el-icon></template>
        </el-button> -->
        <el-button type="primary" @click="handle('fullScreen')">
          <template #icon
            ><el-icon><FullScreen /></el-icon
          ></template>
        </el-button>
      </el-space>
    </el-row>
  </div>
</template>

<script setup>
defineOptions({
  name: 'ImageView'
});
import { ref, reactive, nextTick } from 'vue';
import 'viewerjs/dist/viewer.css';
import { component as VueViewer } from 'v-viewer';
import { RefreshLeft, RefreshRight, Minus, Plus, FullScreen, Edit } from '@element-plus/icons-vue';
const props = defineProps({
  src: {
    type: String,
    default: ''
  }
});
// 实例
const viewer = ref();
// 缩放比例
const zoomProportion = ref('');

const options = reactive({
  fullscreen: false, // 是否全屏模式
  inline: true, // 是否行内
  toolbar: false, // 是否显示工具栏
  navbar: false, // 是否显示导航栏
  rotatable: true, // 是否能够缩放
  backdrop: true, // 是否显示遮罩背景
  button: true, // 是否显示右上角全屏按钮
  title: false, // 是否显示标题
  zoom: e => {
    zoomProportion.value = `${Number.parseInt(String(e.detail.ratio * 100))}%`;
  }
});

const inited = e => {
  viewer.value = e;
  nextTick(() => {
    setTimeout(() => {
      zoomProportion.value = `${Number.parseInt(String(viewer.value.initialImageData.ratio * 100))}%`;
    }, 100);
  });
};

const handle = value => {
  if (!viewer.value) return;
  if (value === 'rotateLeft') {
    return viewer.value.rotate(-90);
  }
  if (value === 'rotateRight') {
    return viewer.value.rotate(90);
  }
  if (value === 'scalePlus') {
    return viewer.value.zoom(0.1);
  }
  if (value === 'scaleMinus') {
    return viewer.value.zoom(-0.1);
  }
  if (value === 'fullScreen') {
    return viewer.value.full();
  }
};
</script>

<style lang="scss" scoped>
:deep(.arco-space-item) {
  height: 100%;
}

:deep(.viewer) {
  img {
    display: none;
  }
}

:deep(.viewer-container:not(.viewer-fixed)) {
  background: none;
}

.pre-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .viewer-box {
    height: 100%;
    flex: 1;
    margin-bottom: 16px;
    background-color: var(--color-bg-5);
  }

  .zoom-proportion {
    padding: 0 12px;
    height: 100%;
    color: #fff;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
  }
}
</style>
